<template>
	<view>
		<!-- 头像框 -->
		<view style="height: 200upx;background-color: #F0AD4E;display: flex;align-items: center;">
			<view class="circle-avatar">
				<image :src="checkAvatar(userInfo)" style="width: 100%;height: 100%;" mode="aspectFit"></image>
			</view>
			
			<view v-if="!checklogin" style="display: flex;flex-direction: column;margin-left: 20upx;">
				<view>
					<text>{{userInfo.nickname}}</text>
				</view>
				<view>
					<text>{{userInfo.mobile}}</text>
				</view>
			</view>
			
			<view v-if="checklogin" style="display: flex;flex-direction: column;margin-left: 20upx;" @click="login">
				<view>
					<text>登录/注册</text>
				</view>
			</view>
		</view>
		
		<!-- 我的下面的界面按钮 -->
		<view>
			<uni-list>
				<uni-list-item title="我的地址"   thumb-size="sm" :thumb="extraIcon1" showArrow :show-extra-icon="true"></uni-list-item>
				<uni-list-item title="我的收藏"   thumb-size="sm" :thumb="extraIcon2" showArrow :show-extra-icon="true"/>
				<uni-list-item title="我的评价"   thumb-size="sm" :thumb="extraIcon3" showArrow :show-extra-icon="true"/>
				<uni-list-item title="修改手机号" thumb-size="sm" :thumb="extraIcon4" showArrow :show-extra-icon="true"/>
				
			</uni-list>
			
			<view class="layout-class" @click="layout">
				<!-- 自定义 body -->
				<text>退出账号</text>
			</view>
			
		</view>
		
		   
	</view>
</template> 

<script>
	import {getRequest, getPost} from '../../api/api.js'; // 请求接口
	import {getUserInfo} from '../../api/request.js'; // 请求路径
	import {errdata} from '../../api/errdata.js'
	
	export default {
		data() {
			return {
				userInfo: {
					avatar: "",
					nickname: '',
					mobile: ''
				},
				checklogin: true,
				extraIcon1: require('../../static/icon/地址.png'),
				extraIcon2: require('../../static/icon/收藏.png'),
				extraIcon3: require('../../static/icon/评价.png'),
				extraIcon4: require('../../static/icon/手机.png')
			}
		},

		methods: {
			checkAvatar(userInfo) {
				console.log(userInfo)
				
				// 判断对象的值
				if(userInfo == null) {
					return 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png';
				}
				
				//
				if(userInfo.avatar == null || typeof userInfo.avatar == 'undefined' || userInfo.avatar == '') {
					console.log("不合格");
					return 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png';
				}
				return userInfo.avatar;
			},

			// 判断是否登录
			 exitToken() {
				// let checklogin = true;
				console.log("1");
				let that = this;
				wx.getStorage({
					key:"token",
					success:function(res){
						console.log("===="+ res)
						that.checklogin = false;
						
						
					}
				})
				
				Promise.all([getPost(getUserInfo)])
					.then((res)=> {
						console.log("我的======>");
						console.log(res[0].data.data.userInfo);
						this.userInfo = res[0].data.data.userInfo;
						
					})
				
			 // 	 uni.getStorageSync({
				// 	key:"token",
				// 	success: (res) => {
				// 		console.log("2");
				// 		console.log(res)
				// 		this.checklogin = true;
						
				// 		获取登录信息
				// 		getPost(getUserInfo)
				// 			.then((res)=> {
				// 				console.log("3");
				// 				console.log("用户信息");
				// 				console.log(res);
				// 			})
				// 			.catch((err)=> {
								
				// 			})
						
						
				// 	},
				// 	fail: () => {
				// 		this.checklogin = false;
				// 	}
				// })
				// console.log("4");
				// console.log(token);
				// return true;
			},
			
			initUserInfo() {
				
			},
			
			login() {
				uni.navigateTo({
					url:'/pages/login/login',
					animationDuration:true
				})
			},
			
			// 退出
			layout() {
				console.log("退出");
				// 1.清除缓存
				
				// 2.删除用户信息
				this.userInfo = {};
				let token = uni.getStorageSync("token") || '';
				console.log(token);
				if(!token) { // 不存在
					errdata.errlist("未登录");
					return;
				}
				uni.removeStorage({
					key:"token",
					success:()=>{
						this.checklogin = true;
						console.log("退出成功");
					},
					fail: () => {
						// this.checklogin = false;
						console.log("退出失败");
					}
				});
			}
			
		},
		
		mounted() {
			// this.exitToken();
		},
		
		onShow() {
			console.log("被显示了");
			this.exitToken();
		}
	}
</script> 

<style scoped>
	.circle-avatar {
		border: #F0AD4E 1upx solid;
		width: 150upx;
		height: 150upx;
		border-radius: 80upx;
		background-color: #F0AD4E;
		overflow: hidden;
	}
	
	.layout-class {
		width: 100%;margin-top: 20upx;background-color: white;line-height: 100upx;display: flex;justify-content: center;
	}
</style>
